<template>
  <h1>Button 按钮</h1>
  <Captions title="基础用法">
    使用 <span class="mark-span">type</span>来定义 Button 的样式，按钮类型设置属性值有<span class="mark-span">primary, warning, success, info, danger, default,text</span>
    <br>
    添加 <span class="mark-span">plain</span>属性,设置朴素按钮
  </Captions>
  <Demo :component="Button1"></Demo>

  <Captions title="禁用按钮">
    通过设置 <span class="mark-span">disabled</span>来将按钮禁用
  </Captions>
  <Demo :component="Button2"></Demo>

<!--  <Captions title="plain朴素按钮">-->
<!--    添加 <span class="mark-span">plain</span>属性-->
<!--  </Captions>-->
<!--  <Demo :component="Button3"></Demo>-->

  <Captions title="按钮尺寸">
    通过设置 <span class="mark-span">size</span>属性来控制Button按钮的大小
    <br>
    按钮大小设置属性值有<span class="mark-span">large,small,mini</span>
  </Captions>
  <Demo :component="Button4"></Demo>

  <Captions title="圆角按钮">
    通过添加 <span class="mark-span">radius</span>属性来控制Button按钮的圆角
  </Captions>
  <Demo :component="Button5"></Demo>

  <Captions title="图标位置">
    设置 <span class="mark-span">icon</span>属性给按钮添加图标；设置<span class="mark-span">iconPositon</span>属性控制图标的位置，默认在左边，当<span class="mark-span">iconPositon</span>设置为<span class="mark-span">right</span>,图标显示在右边
  </Captions>
  <Demo :component="Button6"></Demo>

  <Captions title="加载中">
    点击按钮后进行数据加载操作，在按钮上显示加载状态。通过添加 <span class="mark-span">loading</span>属性来控制
  </Captions>
  <Demo :component="Button7"></Demo>

  <Captions title="长按钮">
    通过设置属性<span class="mark-span">long</span> 可将按钮宽度设置为 100%，常用于弹窗内操作按钮。
  </Captions>
  <Demo :component="Button9"></Demo>
<!--  <Captions title="按钮组">-->
<!--  </Captions>-->
<!--  <Demo :component="Button8"></Demo>-->

  <TableDes :headList="headList" :columnList="columnList"></TableDes>
</template>

<script>
  import Captions from '../Captions.vue'
  import Demo from '../Demo.vue'
  import Button1 from './Button1.vue'
  import Button2 from './Button2.vue'
  import Button3 from './Button3.vue'
  import Button5 from './Button5.vue'
  import Button4 from './Button4.vue'
  import Button6 from './Button6.vue'
  import Button7 from './Button7.vue'
  import Button8 from './Button8.vue'
  import Button9 from './Button9.vue'
  import TableDes from '../TableDes.vue'
  export default {
    name: "ButtonDemo",
    components:{
      Demo, Captions, TableDes
    },
    setup(){
      const headList = ['参数', '说明', '类型', '可选值', '默认值']
      const columnList = [
        ['type','按钮类型', 'string',  'primary, warning, success, info, danger, default,text', ' default'],
        ['disabled','禁用按钮', 'boolean',  '—', ' false'],
        ['plain','朴素按钮', 'boolean',  '—', ' false'],
        ['size','按钮尺寸', 'string',  'large,small,mini', ' —'],
        ['radius','圆角按钮', 'boolean',  '—', ' —'],
        ['loading','加载中', 'boolean',  '—', ' false'],
        ['iconPositon','图标位置设置', 'string',  'left,right', '—'],
        ['icon','添加图标', 'string',  '—', ' —'],
        ['long','长按钮', 'boolean',  '—', ' false'],
      ]
      return { Button1, Button5, Button4, Button3, Button2, Button6, Button7, Button8,Button9, headList, columnList }
    }
  }
</script>
<style scoped>
</style>
